import React from 'react';
import { Route, Redirect, RouteProps, RouteComponentProps } from 'react-router-dom';
import { useAuth } from '../contexts/AuthContext';

// Fix the interface to avoid TypeScript errors with React 18
interface ProtectedRouteProps {
  component: React.ComponentType<RouteComponentProps<any>> | React.ComponentType<any>;
  path?: string;
  exact?: boolean;
  sensitive?: boolean;
  strict?: boolean;
  [key: string]: any;
}

const ProtectedRoute: React.FC<ProtectedRouteProps> = ({
  component: Component,
  ...rest
}) => {
  const { isAuthenticated, isLoading } = useAuth();

  // 如果正在加载认证状态，显示加载组件
  if (isLoading) {
    return (
      <div className="min-h-screen flex items-center justify-center bg-gray-50">
        <div className="text-center">
          <div className="inline-flex items-center px-4 py-2 font-semibold leading-6 text-sm shadow rounded-md text-blue-500 bg-white border border-blue-200">
            <svg 
              className="animate-spin -ml-1 mr-3 h-5 w-5 text-blue-500" 
              xmlns="http://www.w3.org/2000/svg" 
              fill="none" 
              viewBox="0 0 24 24"
            >
              <circle 
                className="opacity-25" 
                cx="12" 
                cy="12" 
                r="10" 
                stroke="currentColor" 
                strokeWidth="4"
              ></circle>
              <path 
                className="opacity-75" 
                fill="currentColor" 
                d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
              ></path>
            </svg>
            验证身份中...
          </div>
        </div>
      </div>
    );
  }

  // Use a type assertion to avoid TypeScript errors with React 18
  const RouteComponent = Route as any;
  const RedirectComponent = Redirect as any;

  return (
    <RouteComponent
      {...rest}
      render={(props: RouteComponentProps) => {
        if (isAuthenticated) {
          return <Component {...props} />;
        }

        // 未认证，重定向到登录页面
        return (
          <RedirectComponent
            to={{
              pathname: '/login',
              state: { from: props.location }
            }}
          />
        );
      }}
    />
  );
};

export default ProtectedRoute; 
